var eventCtrl = {
		/**
		 * 이벤트 등록 메서드
		 * @param elem: 이벤트를 등록할 엘리먼트
		 * @param eventType: 등록할 이벤트의 종류
		 * @param handler: 이벤트 발생시 실행할 function
		 */
		add: function(elem, eventType, handler) {
			eventType = eventType.replace('on', '');
			
			if (elem.addEventListener) {
				elem.addEventListener(eventType, handler, false);
			} else if (elem.attachEvent) {
				eventType = 'on' + eventType;
				elem.attachEvent(eventType, handler);
			}
		},
		/**
		 * 이벤트 삭제 메서드
		 * @param elem: 이벤트를 삭제할 엘리먼트
		 * @param eventType: 삭제할 이벤트의 종류
		 * @param handler: 삭제할 function
		 */
		remove: function(elem, eventType, handler){
			eventType = eventType.replace('on', '');
			if (elem.removeEventListener) {
				elem.removeEventListener(eventType, handler);
			} else if (elem.detachEvent) {
				eventType = 'on' + eventType;
				elem.detachEvent(eventType, handler);
			}
		}
};
eventCtrl.add(window, 'load', function(event){
	var STATUS_PEN = 'pen';
	var board = document.getElementById('boardContainer');
	var tools = document.getElementsByName('drowTool');
	var status = null;
	var tool = null;
	// 마우스 왼쪽 버튼을 누르면 STATUS_PEN 상태 등록
	eventCtrl.add(board, 'mousedown', function(event){
		if (event.button === 0) {
			status = STATUS_PEN;
		}
	});
	// 마우스 왼쪽 버튼이 올라오면 등록된 상태 해제 
	eventCtrl.add(board, 'mouseup', function(){
		if (event.button === 0) {
			status = null;
		}
	});
	/* 마우스의 움직임이 발생했을 때 STATUS_PEN 이면
	 * 1px 크기의 파란색 <div> 엘리먼트를 만들어
	 * 마우스 움직임이 발생한 위치에 배치한다. 
	 */
	eventCtrl.add(board, 'mousemove', function(event){
		if (status === STATUS_PEN) {
			var div = document.createElement('div');
			div.style.width = '1px';
			div.style.height = '1px';
			div.style.backgroundColor = 'blue';
			div.style.position = 'absolute';
			div.style.left = event.pageX + 'px';
			div.style.top = event.pageY + 'px';
			board.appendChild(div);
		}
	});
});
